<template>
  <div
    :class="getClassName()"
    data-type="figure"
    :data-block-id="blockData.blockId"
    :data-id="blockData.figureData.dataId"
    :data-figure-annex-number="annexNumber"
    :data-number="blockData.figureData.figureNumber"
  >
    <iframe-checkbox :blockData="blockData" />
    <p class="image-wrapper">
      <img
        :data-index="blockData.dataIndex"
        :src="figureData.attributes.url"
        :width="width"
        :height="height"
        :alt="figureData.captionZh.title"
        :data-drawio-xml="figureData.xmlContent ? figureData.xmlContent : null"
      />
    </p>
    <p
      v-for="(item, index) in figureData.noteList"
      :data-type="item.dataType"
      :class="item.dataType + ' ' + item.dataLang"
      :[dataNumber]="item.contentNumber || null"
      :key="item.dataId + '' + index"
      :data-id="item.textData.dataId"
      :data-note-id="item.dataId"
      :data-lang="item.dataLang"
    >
      <template v-for="(i, idx) of getContentList(item)">
        <template v-if="i.contentType === 'text'">{{ i.content }}</template>
        <sup v-else-if="i.contentType === 'sup'" :key="idx" data-type="sup">{{ i.content }}</sup>
        <sub v-else-if="i.contentType === 'sub'" :key="idx" data-type="sub">{{ i.content }}</sub>
      </template>
    </p>
    <p
      class="data-content-image-caption zh"
      :data-id="figureData.captionZh.dataId"
      data-lang="zh"
      :data-figure-annex-number="annexNumber"
      :data-number="blockData.figureData.figureNumber"
    >
      {{ figureData.captionZh.title }}
    </p>
    <p
      v-if="languageType === 'both' && figureData.captionEn"
      class="data-content-image-caption en"
      :data-id="figureData.captionEn.dataId"
      data-lang="en"
      :data-figure-annex-number="annexNumber"
      :data-number="blockData.figureData.figureNumber"
    >
      {{ figureData.captionEn.title }}
    </p>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import IframeCheckbox from '../IframeCheckbox.vue'
export default {
  components: { IframeCheckbox },
  props: {
    blockData: {
      type: Object,
      default() {
        return {}
      }
    },
    annexNumber: {
      type: String,
      default: ''
    }
  },
  inject: ['pageType'],
  data() {
    return {
      dataNumber: 'data-number'
    }
  },
  computed: {
    figureData() {
      return this.blockData.figureData
    },
    width() {
      return this.blockData.figureData.attributes.width || 30
    },
    height() {
      return this.blockData.figureData.attributes.height || 30
    },
    ...mapGetters(['languageType'])
  },
  methods: {
    getContentList(item) {
      return item.textData?.contentList?.slice(1) || []
    },
    getClassName() {
      let className = this.annexNumber ? 'figure-annex' : this.pageType === 'introduction' ? 'figure-introduction' : ''
      if (this.figureData.xmlContent) {
        className += ' flow-chart'
      }
      return `data-content-image-wrapper ${className}`
    }
  }
}
</script>
